<template>
    <div>
        <van-cell-group>
            <van-field
                v-model="username"
                required
                clearable
                label="用户名"
                icon="question"
                placeholder="请输入用户名"
                @click-icon="$toast('请输入用户名')"
            />

            <van-field
                v-model="password"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
                icon="question"
                @click-icon="$toast('请输入登录密码')"
            />
            <van-field
                v-model="checkcode"
                type="text"
                label="验证码"
                placeholder="请输入验证码"
                required
                icon="question"
                @click-icon="$toast('请输入验证码')"
            />
        </van-cell-group>
        <van-button size="large"  type="danger" plain @click="login">立即登录</van-button>
    </div>
</template>
<script>
import Vue from 'vue';
import { Field } from 'vant';
import { Button } from 'vant';
import { Toast } from 'vant';
Vue.use(Field).use(Button).use(Toast);
export default {
    data(){
        return {
            username:'',
            password:'',
            checkcode:''
        }
    },
    methods:{
        login(){
            if(this.username==''||this.password==''||checkcode==''){
                Toast('请输入完整登录信息');
            }   
        }
    }
}
</script>
<style lang="less">

</style>

